<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { copyText } from '../utils/utils.js';
import { initData } from '../config';

const count = ref(0);
const mocksList = ref();

const showMessage = ref(false);
const msg = ref('')

const headers = [
  {
    title: '类型',
    align: 'start',
    sortable: false,
    key: 'name',
    width: '100'
  },
  { 
    title: '内容', 
    align: 'start',
    sortable: false,
    key: 'content',
    width: '200'
  },
  { 
    title: '长度', 
    align: 'start',
    sortable: false,
    key: 'length',
    width: '100'
  },
  { 
    title: '操作',
    align: 'start',
    sortable: false,
    key: 'actions',
    width: '100'
  },
];
type mockItem = {
  name: string;
  content: string;
  length?: number;
  fn: any,
  param?: any
}
const copy = (item: mockItem) => {
  console.log('---- copy ----:', item);
  copyText(item.content).then((status) => {
    if (status) {
      msg.value = '复制成功';
    } else {
      msg.value = '复制失败';
    }
    showMessage.value = true;
  });
}

const refresh = (item: mockItem) => {
  console.log('---- refresh ----:', item);
  const {fn, param, length} = item;
  if (length) {
    item.content = fn(Number(length));
    return;
  }
  if (Array.isArray(param)) {
    item.content = fn(...param)
  } else {
    item.content = fn(param);
  }
}

const handleInput = (item: mockItem) => {
  console.log('---- handleInput ----:', item);
  const {fn, length} = item;
  if (length) {
    item.content = fn(Number(length));
  }
}

const mockInit = () => {
  mocksList.value = initData
}

onMounted(() => {
  count.value = Math.random();
  mockInit()
})
</script>

<template>
  <div class="main-container">
    <h3 class="text-h5 text-center mb-2">数据Mock助手</h3>
    <v-data-table
      density="compact"
      :items-per-page="20"
      :headers="headers" 
      :items="mocksList"
      hide-default-footer
    >
      <template v-slot:item.content="{ item, value }">
        <div class="text-left content-wrap" :title="'点击复制:'+item.content" @click.native="copy(item)">{{value}}</div>
      </template>
      <template v-slot:item.length="{ item }">
        <v-text-field
          v-if="item.length !== undefined"
          label="长度"
          title="在上下箭头上按下鼠标左键后上下拖动可以改变长度"
          type="number"
          v-model="item.length"
          variant="solo"
          hide-details="auto"
          density="compact"
          @input="handleInput(item)"
          single-line
        ></v-text-field>
      </template>
      <template v-slot:item.actions="{ item }">
        <v-btn class="mr-2" title="复制" size="small" icon="mdi-content-copy" density="comfortable" @click="copy(item)"></v-btn>
        <v-btn icon="mdi-refresh" title="重生成" size="small" density="comfortable" @click="refresh(item)"></v-btn>
      </template>
    </v-data-table>

    <v-snackbar v-model="showMessage" :timeout="2000">
      {{ msg }}
      <template v-slot:actions>
        <v-btn
          color="pink"
          variant="text"
          @click="showMessage = false"
        >
          关闭
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<style scoped>
.main-container{
  width: 580px;
  text-align: left;
}
.content-wrap{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.content-wrap:hover{
  overflow: visible;
  text-overflow: unset;
  display: block;
}
</style>
